import { defineComponent, h, ref } from 'vue'
import { NButton, useMessage, NDataTable, NSpin } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import routerApi from '@/service/api/router'
import pageStyle from './index.module.scss'
import MessageBox from '@/components/nComponents/MessageBox'
import Edit from './components/Edit'
import Sort from './components/Sort'
export default defineComponent({
  name: 'MenuManagement',
  setup() {
    const toast = useMessage()
    const addRef = ref()
    const handAdd = (row?: any) => {
      addRef.value.open(row || null)
    }
    const sortRef = ref()
    const handSort = (row: any) => {
      sortRef.value.open(row)
    }
    const delShow = ref(false)
    const delLoading = ref(false)
    let oldRow: any = {}
    const handDel = (row: any) => {
      oldRow = row
      delShow.value = true
    }
    const handConfirm = async () => {
      delLoading.value = true
      const { code, message } = await routerApi.del([oldRow.id])
      delLoading.value = false
      if (code !== 200) {
        toast.error(message)
        return
      }
      toast.success('删除成功')
      delShow.value = false
      fetchData()
    }
    /**
     *  获取列表
     * */
    const columns: DataTableColumns<any> = [
      {
        title: '标题',
        key: 'meta.title'
      },
      {
        title: 'name',
        key: 'name'
      },
      {
        title: '路径',
        key: 'path'
      },
      {
        title: '路径',
        key: 'component'
      },
      {
        title: '权重',
        key: 'sort'
      },
      {
        title: '操作',
        key: 'total',
        align: 'center',
        width: 300,
        render(row: any) {
          return h('div', [
            h(
              NButton,
              {
                size: 'small',
                type: 'primary',
                onClick: () =>
                  handAdd({
                    parentId: row.id,
                    isPage: false,
                    component: 'views/common/page'
                  })
              },
              { default: () => '添加子菜单' }
            ),
            h(
              NButton,
              {
                size: 'small',
                type: 'warning',
                class: 'ml10',
                onClick: () => handSort(row)
              },
              { default: () => '权重' }
            ),
            h(
              NButton,
              {
                size: 'small',
                type: 'warning',
                class: 'ml10',
                onClick: () => handAdd(row)
              },
              { default: () => '编辑' }
            ),
            h(
              NButton,
              {
                size: 'small',
                class: 'ml10',
                type: 'error',
                onClick: () => handDel(row)
              },
              { default: () => '删除' }
            )
          ])
        }
      }
    ]
    const rowKey = (row: any) => row.id
    const tableData = ref([])
    const listLoading = ref<boolean>(false)
    const fetchData = async () => {
      listLoading.value = true
      const { data } = await routerApi.allList()
      tableData.value = data
      console.log(tableData.value)
      listLoading.value = false
    }
    fetchData()

    const boxSlot = {
      header: () => (
        <div>
          <div class="title">温馨提示</div>
        </div>
      ),
      default: () => (
        <>
          <div class={pageStyle.delBox}>
            <div class="pt-[10px] pb-[10px]">
              <i class="esayIcon esayIcon-jinggao"></i>
              <span class="tip">确认要删除选中数据吗?</span>
            </div>
            <div class="btns flex align-center justify-end">
              <NButton
                secondary
                onClick={() => {
                  delShow.value = false
                }}
              >
                取消
              </NButton>
              <NButton style={{ marginLeft: '10px' }} type="primary" onClick={handConfirm}>
                {delLoading.value && (
                  <NSpin
                    class="mr-[10px]"
                    size={15}
                    stroke="#fff"
                    v-slots={{
                      icon: () => <i class="esayIcon esayIcon-a-jiazaizhongdaxiao text-white"></i>
                    }}
                  />
                )}
                <span>确认删除</span>
              </NButton>
            </div>
          </div>
        </>
      )
    }
    return () => (
      <>
        <div class={pageStyle.menuManagementPage}>
          <div class="menu-management-page-main">
            <div class="pb20">
              <NButton type="success" onClick={() => handAdd()}>
                <i class="esayIcon esayIcon-tianjiawenjianjia"></i>
                <span class="pl8">添加</span>
              </NButton>
            </div>
            <NDataTable
              class="flex-1"
              flex-height
              columns={columns}
              data={tableData.value}
              row-key={rowKey}
              default-expand-all
            />
          </div>
          <MessageBox width={'400px'} v-model={delShow.value} isClose={false} v-slots={boxSlot} />
          <Edit ref={addRef} onSuccess={fetchData} />
          <Sort ref={sortRef} onSuccess={fetchData} />
        </div>
      </>
    )
  }
})
